Skip to main content

获取节点

定时器​

直接在生命周期函数中获取值为 null，需要延迟 200 毫秒的函数获取

setTimeout(() => {
  let query = Taro.createSelectorQuery();
  query
    .select(".demoDOM")
    .boundingClientRect((res) => {
      console.log(res);
    })
    .exec();
}, 200);

nextTick 回调​

和定时器原理相同，在 nextTick 回调里获取元素信息就能拿到了，也就是要等 dom 渲染完成后

const selectorQueryClientRect = (
  selector: string
): Promise<NodesRef.BoundingClientRectCallbackResult> =>
  new Promise((resolve) => {
    const query = Taro.createSelectorQuery();
    query
      .select(selector)
      .boundingClientRect((res: NodesRef.BoundingClientRectCallbackResult) => {
        resolve(res);
      })
      .exec();
  });

useEffect(() => {
  Taro.nextTick(async () => {
    const query = await selectorQueryClientRect("#name");
    console.log(query);
  });
}, []);

Ref​

ref 只能修改,无法返回节点信息

在滚动视图中获取相关滚动数据​

节点必须是 scroll-view/ScrollView 或者 viewport，返回 NodesRef 对应的 SelectorQuery。

query
  .select("选择器")
  .selectViewport()
  .scrollOffset(function (res) {
    res.id; // 节点的ID
    res.dataset; // 节点的dataset
    res.scrollLeft; // 节点的水平滚动位置
    res.scrollTop; // 节点的竖直滚动位置
  })
  .exec();

参考​